<template>
    <view class="date_filter">
        <text
            v-for="(i, idx) in list"
            :key="idx"
            :class="{ label: true, active_label: i.value === selectDate?.value }"
            @click="handleFilter(i)"
        >
            {{ i.label }}
        </text>
    </view>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
export interface selectType {
    value: string | number;
    label: string | number;
}
const props = withDefaults(
    defineProps<{
        list: selectType[];
    }>(),
    { list: () => [{ label: '', value: '' }] },
);
const emits = defineEmits(['filter']);
const selectDate = ref<selectType>();
function handleFilter(i: any) {
    emits('filter', i);
    selectDate.value = i;
}

watch(
    () => props.list,
    val => {
        if (val) {
            selectDate.value = val[0];
        }
    },
    {
        immediate: true,
    },
);
</script>
<style lang="scss" scoped>
.date_filter {
    .label {
        display: inline-block;
        width: 108rpx;
        height: 52rpx;
        background-color: #f7f8fa;
        font-size: 26rpx;
        line-height: 52rpx;
        text-align: center;
        color: #666666;
        box-sizing: border-box;
        border-right: 1rpx solid #d9e1f2;

        &:first-child {
            border-radius: 12rpx 0 0 12rpx;
        }

        &:last-child {
            border-radius: 0 12rpx 12rpx 0;
            border-right: none;
        }
    }

    .active_label {
        background-color: #615dff;
        color: #ffffff;
    }
}
</style>
